import React from 'react';
import { ChevronRightIcon } from '@heroicons/react/24/outline';

interface SettingsOptionProps {
  title: string;
  value?: string;
  onClick: () => void;
}

const SettingsOption: React.FC<SettingsOptionProps> = ({ title, value, onClick }) => {
  return (
    <button
      onClick={onClick}
      className="w-full flex items-center justify-between p-4 text-left border-b border-gray-100 last:border-b-0"
    >
      <span className="text-gray-800">{title}</span>
      <div className="flex items-center text-gray-500">
        {value && <span className="mr-2 text-sm">{value}</span>}
        <ChevronRightIcon className="w-5 h-5" />
      </div>
    </button>
  );
};

export default SettingsOption;